


import React, { useState } from 'react'
import { inject, observer } from 'mobx-react';
import "./index.scss"
import { rolelist } from '../../utils/common';
import { baseURL } from '../../api/request';
import { Modal, Row, Form } from 'antd';
import { Col } from 'antd';
import { Button } from 'antd';
import { Input } from 'antd';
import { reg } from '../../utils/validate';
import { ajax } from '../../api';
import { Link } from 'react-router-dom';

function Mine({ user }: any) {
    const [form] = Form.useForm()
    const { userInfo, changeUserInfo } = user
    const [show, setShow] = useState(false)
    const onShow = () => {
        setShow(true)
    }
    const handleOk = () => {
        form.validateFields()
            .then(async valid => {
                let { code, result }: any = await ajax.updateinfo(valid)
                if (code == 200) {
                    setShow(false)
                    changeUserInfo(valid)
                }
            })
    }
    const handleCancel = () => {
        setShow(false)
    }
    return (
        <div style={{background: '#fff', padding:'20px 30px'}}>
            <h2 style={{ fontSize: 20 }}>个人中心</h2>
            {userInfo && <div className="minebox">
                <div className="head">
                    <img src={userInfo.avatar.replace(/public/, baseURL)} style={{ width: '100px' }} />
                    <Row style={{ width: '200px' }}>
                        <Col>
                            <Button onClick={onShow} danger>修改</Button>
                        </Col>
                        <Col offset={3}>
                            <Button>
                                <Link to="/main/time/time">考勤</Link>
                            </Button>
                        </Col>
                    </Row>
                </div>
                <div className="info">
                    <p>姓名： {userInfo.username}</p>
                    <p>手机号： {userInfo.phone}</p>
                    <p>职位：{rolelist[userInfo.role-1]?.text}</p>
                </div>
            </div>}
            <Modal visible={show} title="修改个人信息" onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
                <Form form={form} initialValues={userInfo} labelCol={{span:5}} wrapperCol={{span:12,offset:2}}>
                    <Form.Item
                        label="姓名"
                        name="username"
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input placeholder='请输入姓名' />
                    </Form.Item>

                    <Form.Item
                        label="电话号码"
                        name="phone"
                        rules={[{ required: true, message: '请输入电话号码' },
                        { pattern: reg.phone, message: '请输入有效电话号码' }]}
                    >
                        <Input placeholder='请输入电话号码' />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default inject("user")(observer(Mine))
